<div class="p">
    <div class="row m-b">
        <div class="span-3">
            <div class="card card-primary card-inverse">
                <div class="card-body">
                    <div class="row tc">
                        <div class="span-3">
                            <i class="ion" style="font-size: 4em">&#xe632;</i>
                        </div>
                        <div class="span-9">
                            <h2>4.589</h2>
                            <h4 class="text-muted">CLIENTS</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="span-3">
            <div class="card card-success card-inverse">
                <div class="card-body">
                    <div class="row tc">
                        <div class="span-3">
                            <i class="ion" style="font-size: 4em">&#xe629;</i>
                        </div>
                        <div class="span-9">
                            <h2>789</h2>
                            <h4 class="text-muted">DEALS</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="span-3">
            <div class="card card-warning card-inverse">
                <div class="card-body">
                    <div class="row tc">
                        <div class="span-3">
                            <i class="ion" style="font-size: 4em">&#xe6a3;</i>
                        </div>
                        <div class="span-9">
                            <h2>$1.999,50</h2>
                            <h4 class="text-muted">INCOME</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="span-3">
            <div class="card card-danger card-inverse">
                <div class="card-body">
                    <div class="row tc">
                        <div class="span-3">
                            <i class="ion" style="font-size: 4em">&#xe64f;</i>
                        </div>
                        <div class="span-9">
                            <h2>999</h2>
                            <h4 class="text-muted">ACCOUNT</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row m-b">
        <div class="span-9">
            <div class="card card-bordered">
                <div class="card-head">
                    <div class="card-title">图表</div>
                    <div class="card-extra">
                        <a href="###" id="reset-index-charts"><i class="ion">&#xe65d;</i></a>
                    </div>
                </div>
                <div class="card-body">
                    <div id="index-charts" style="height: 400px"></div>
                </div>
            </div>
        </div>
        <div class="span-3">
            <div class="card card-bordered">
                <div class="card-head">
                    <div class="card-title">指数</div>
                </div>
                <div class="card-body">
                    <div style="height: 400px">
                        <p class="m-b-sm">Visits (40% - 29.703 Users)</p>
                        <div class="progress progress-success progress-show-info">
                            <div class="progress-inner">
                                <div class="progress-bg" style="width: 45%;"></div>
                            </div>
                            <span class="progress-text"><span class="progress-text-inner">45%</span></span>
                        </div>
                        <p class="m-b-sm">Unique (20% - 24.093 Unique Users)</p>
                        <div class="progress progress-info progress-show-info">
                            <div class="progress-inner">
                                <div class="progress-bg" style="width: 25%;"></div>
                            </div>
                            <span class="progress-text"><span class="progress-text-inner">25%</span></span>
                        </div>
                        <p class="m-b-sm">Pageviews (60% - 78.706 Views)</p>
                        <div class="progress progress-warning progress-show-info">
                            <div class="progress-inner">
                                <div class="progress-bg" style="width: 65%;"></div>
                            </div>
                            <span class="progress-text"><span class="progress-text-inner">65%</span></span>
                        </div>
                        <p class="m-b-sm">New Users (80% - 22.123 Users)</p>
                        <div class="progress progress-danger progress-show-info">
                            <div class="progress-inner">
                                <div class="progress-bg" style="width: 80%;"></div>
                            </div>
                            <span class="progress-text"><span class="progress-text-inner">80%</span></span>
                        </div>
                        <p class="m-b-sm">Bounce Rate (40.15%)</p>
                        <div class="progress progress-success progress-show-info">
                            <div class="progress-inner">
                                <div class="progress-bg" style="width: 40%;"></div>
                            </div>
                            <span class="progress-text"><span class="progress-text-inner">40%</span></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row m-b">
        <div class="span-3">
            <div class="card card-bordered">
                <div class="card-body">
                    <div id="index-echarts-2" style="height: 300px"></div>
                </div>
                <div class="card-foot">
                    <div class="p-sm">
                        $11.234,00
                        <div class="r">
                            <span class="text-danger"><i class="ion">&#xe618;</i></span> 15%
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="span-9">
            <div id="index-table" style="height: 400px"></div>
        </div>
    </div>
    <div class="row m-b">
        <div class="span-6">
            <div class="card card-bordered">
                <div class="card-head">
                    <div class="card-title">
                        简单表格
                    </div>
                </div>
                <div class="card-body">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Username</th>
                                <th>Date registered</th>
                                <th>Role</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Samppa Nori</td>
                                <td>2012/01/01</td>
                                <td>Member</td>
                                <td>
                                    <span class="label label-success">Active</span>
                                </td>
                            </tr>
                            <tr>
                                <td>Estavan Lykos</td>
                                <td>2012/02/01</td>
                                <td>Staff</td>
                                <td>
                                    <span class="label label-danger">Banned</span>
                                </td>
                            </tr>
                            <tr>
                                <td>Chetan Mohamed</td>
                                <td>2012/02/01</td>
                                <td>Admin</td>
                                <td>
                                    <span class="label label-default">Inactive</span>
                                </td>
                            </tr>
                            <tr>
                                <td>Derick Maximinus</td>
                                <td>2012/03/01</td>
                                <td>Member</td>
                                <td>
                                    <span class="label label-warning">Pending</span>
                                </td>
                            </tr>
                            <tr>
                                <td>Friderik Dávid</td>
                                <td>2012/01/21</td>
                                <td>Staff</td>
                                <td>
                                    <span class="label label-success">Active</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="span-6">
            <div class="card card-bordered">
                <div class="card-head">
                    <div class="card-title">
                        边框线/hover
                    </div>
                </div>
                <div class="card-body">
                    <table class="table table-hover table-bordered">
                        <thead>
                            <tr>
                                <th>Username</th>
                                <th>Date registered</th>
                                <th>Role</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Samppa Nori</td>
                                <td>2012/01/01</td>
                                <td>Member</td>
                                <td>
                                    <span class="label label-success">Active</span>
                                </td>
                            </tr>
                            <tr>
                                <td>Estavan Lykos</td>
                                <td>2012/02/01</td>
                                <td>Staff</td>
                                <td>
                                    <span class="label label-danger">Banned</span>
                                </td>
                            </tr>
                            <tr>
                                <td>Chetan Mohamed</td>
                                <td>2012/02/01</td>
                                <td>Admin</td>
                                <td>
                                    <span class="label label-default">Inactive</span>
                                </td>
                            </tr>
                            <tr>
                                <td>Derick Maximinus</td>
                                <td>2012/03/01</td>
                                <td>Member</td>
                                <td>
                                    <span class="label label-warning">Pending</span>
                                </td>
                            </tr>
                            <tr>
                                <td>Friderik Dávid</td>
                                <td>2012/01/21</td>
                                <td>Staff</td>
                                <td>
                                    <span class="label label-success">Active</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
